<template>
  <div class="login-content-1 relative min-h-screen flex">
    <div class="flex-col">
      <div class="left">
        <div class="left-bg"></div>
        <div class="left-contet">
          <div class="left-title">Ship Monitoring Platform</div>
          <div class="left-sub-title">
            A 「Safe, Stable, and Efficient」 Real-Time Ship Status Monitoring
            Platform
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-content">
          <div class="text-center">
            <h2>Welcome</h2>
          </div>
          <div class="text-sub">
            <span class="text-sub-1"></span>
            <span class="text-sub-2">Sign in</span>
            <span class="text-sub-1"></span>
          </div>
          <el-form
            ref="formRef"
            class="login-form form"
            :model="loginForm"
            :rules="loginRules"
          >
            <input type="hidden" name="remember" value="true" />
            <el-form-item name="loginName" class="relative">
              <label>loginName</label>
              <el-input
                v-model="loginForm.loginName"
                type="text"
                auto-complete="off"
                placeholder="Enter Username"
              />
            </el-form-item>
            <el-form-item name="password" class="relative">
              <label>password</label>
              <el-input
                v-model="loginForm.password"
                type="password"
                auto-complete="off"
                name=""
                placeholder="Enter Password"
                @keyup.enter.native="handleLoginByPs"
              />
            </el-form-item>
            <div class="label-tips" v-if="fasle">
              <div class="tips-left">
                <input id="remember_me" name="remember_me" type="checkbox" />
                <label for="remember_me">记住我</label>
              </div>
              <div class="tips-right">
                <a href="#" class="text-indigo-400 hover:text-blue-500">
                  忘记密码？
                </a>
              </div>
            </div>
            <div class="submit">
              <el-button
                @click="handleLogin"
                v-loading="loading"
                element-loading-spinner="el-icon-loading"
              >
                Sign in
              </el-button>
            </div>
            <p class="login-question" v-if="false">
              <span>还没有账号？</span>
              <a
                href=""
                target="_blank"
                class="text-indigo-400 hover:text-blue-500 no-underline hover:underline cursor-pointer transition ease-in duration-300"
                >立即注册</a
              >
            </p>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import loginMixins from "@/page/login/index.js";
export default {
  mixins: [loginMixins],
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
